<!--  -->
<template>
  <div class="home">
    <!-- <transition enter-active-class="animate__animated animate__backInDown"
  leave-active-class="animate__animated animate__backOutDown"> -->
    <!-- <router-view></router-view> -->
    <!-- </transition> -->
    
    <van-search v-model="value" shape="round" @click.stop='toSearch' placeholder="请输入搜索关键词" />
    
    <HomeSwipe :banners="state.banners"></HomeSwipe>
    <HomeNav :channel="state.channel"></HomeNav>
    <HomeBannerList :brandList="state.brandList"></HomeBannerList>
    <HomeNewGoodsList :newGoodsList="state.newGoodsList"></HomeNewGoodsList>
    <HomeCategoryList :categoryList="item" v-for="item in state.categoryList" :key="item.id"></HomeCategoryList>
   
  </div>
</template>

<script setup lang="ts">

import {ref, reactive,onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import { getHomeList } from '@/api/api.ts'
// import {jdhvgs} from '@/type/home.ts'
import HomeSwipe from '@/views/Home/components/homeSwipe.vue'
import HomeNav from './components/homeNav.vue'
import HomeBannerList from './components/homeBannerList.vue'
import HomeNewGoodsList from './components/homeNewGoodsList.vue'
import HomeCategoryList from './components/homeCategoryList.vue'
let value = ref('')


const state = reactive({
  banners: [], //轮播
  channel: [], //导航
  brandList: [], //制造商列表
  categoryList: [], //分类商品列表
})
const router = useRouter()
const route = useRoute()
function toSearch() {
  router.push({path: '/home/search'})
}
const getBanners = async () => {
  const res = await getHomeList()
  console.log(res);
  state.banners = res.data.banner;
  state.channel = res.data.channel;
  state.brandList = res.data.brandList;
  state.newGoodsList = res.data.newGoodsList
  state.categoryList = res.data.categoryList
  console.log(state.banners);
}

onMounted(() => {
  getBanners()
})
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 100px;
}
</style>